<template>
  <div class="dashboard" :style="{ transform: `scale(${scale})` }">
    <div class="header">
      <h1 class="title">数据大屏实时展示</h1>
      <span class="time">当前时间：{{ nowTime }}</span>
    </div>
    <div class="content">
      <div class="left">
        <Left></Left>
      </div>
      <div class="center">
        <Center></Center>
      </div>
      <div class="right">
        <Right></Right>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeMount, reactive } from "vue";
import Left from "./views/Left/index.vue";
import Center from "./views/Center/index.vue";
import Right from "./views/Right/index.vue";
import dayjs from "dayjs";
const nowTime = ref(dayjs().format("YYYY年MM月DD日 HH时mm分ss秒"));
let timer = null;
onMounted(() => {
  timer = setInterval(() => {
    nowTime.value = dayjs().format("YYYY年MM月DD日 HH时mm分ss秒");
  }, 1000);
});
onBeforeMount(() => {
  clearInterval(timer);
});

// 大屏适配开始
const scale=ref(1);

onMounted(()=>{
  resize();
  window.addEventListener('resize',resize);
});

const resize=()=>{
  //设计稿的宽高
  const draftWidth=1366;
  const drafHeight=635;
  //整个屏幕的宽高
  const clientWidth=document.documentElement.clientWidth;
  const clientHeight=document.documentElement.clientHeight;
  //当屏幕的比例(16/7)大于设计稿的比例(16/9)，说明屏幕更窄
  if(clientWidth/clientHeight>draftWidth/drafHeight){
    scale.value=clientHeight/drafHeight;
    //当屏幕的比例(16/7)小于设计稿的比例(16/9)，说明屏幕更窄
  }else if(clientWidth/clientHeight<draftWidth/drafHeight){
    scale.value=clientWidth/draftWidth;
  }else{
    scale.value=1;
  }
};





</script>

<style lang="scss" scoped>
.dashboard {
  .header {
    height: 60px;
    background-image: url("./assets/head_bg.png");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .title {
      color: #fff;
      font-size: 22px;
    }
    .time {
      position: absolute;
      top: 20px;
      right: 10px;
      color: $text-color;
      font-size: 12px;
    }
  }
  .content {
    height: calc(100% - 60px);
    display: flex;
    padding: 10px;
    justify-content: space-between;
    .left,
    .right {
      width: 340px;
      height: 100%;
    }
    .center {
      width: 650px;
      height: 546px;
      margin: 0 10px;
      // background: #ccc;
    }
  }
}
</style>
